<template>
    <div class="container-mask-box">
        <div class="container-cropper-box">
            <vueCropper
                    ref="cropper"
                    :img="option.img"
                    :fixedNumber="option.fixedNumber"
                    :fixed="option.fixed"
                    :autoCrop="option.autoCrop"
                    :original="option.original"
                    :centerBox="option.centerBox"
            ></vueCropper>
        </div>
        <div class="container-btn-box">
            <span @click="seve">确定</span>
            <span style="background-color: #fff;color: #000" @click="clear">取消</span>
        </div>
    </div>
</template>

<script>
    import {VueCropper} from 'vue-cropper'
    export default {
        name: 'cropper',
        props:['img','fixedNumber','fixed','autoCrop','original','centerBox'],
        components: {
            VueCropper,
        },
        data() {
            return {
                option:{
                    img: this.img,
                    fixedNumber:this.fixedNumber, //截图框的宽高比例
                    fixed: this.fixed, //开启宽高固定比
                    autoCrop: this.autoCrop,//是否默认生成截图框
                    original:this.original,//上传图片按照原始比例渲染
                    centerBox: this.centerBox, //截图框是否被限制在图片里面
                }
            }
        },
        methods:{
            btn() {
                this.$refs.cropper.startCrop()
            },
            seve() {
                this.$refs.cropper.getCropData((data) => {
                    this.$emit('bas64Data',data)
                });
                this.$refs.cropper.getCropBlob((data) => {
                    this.$emit('blobData',data)
                })
            },
            clear() {
                this.$emit('clear')
            }

        }
    }
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container-mask-box{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: rgba(0,0,0,.5);
    }
    .container-cropper-box{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 420px;
        height: 490px;
        padding: 20px;
        border-radius: 10px;
        background: #fff;
    }
    .container-btn-box{
        position: absolute;
        top: calc(50% + 290px);
        left: 0;
        text-align: center;
        width: 100%;
    }
    .container-btn-box span{
        font-size: 14px;
        padding: 10px 20px;
        background-color: #0ba29a;
        color: #fff;
        margin-right: 50px;
        border-radius: 5px;
        cursor: pointer;
    }
    .cropper-box{
        background: #ccc !important;
    }
</style>
